<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>公告管理</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.0/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="../../static/vendor/font-awesome/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="../../static/css/fontastic.css">
    <!-- Google fonts - Poppins -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="http://cdn.jie12366.xyz/style.default.css" id="theme-stylesheet">
    <!-- Favicon-->
    <link rel="shortcut icon" href="../../static/img/favicon.ico">
    <style>
        .button-color:hover {
            background-color: #796aee;
            color: #ffffff;
        }

        .button-color {
            color: #6c757d;
        }

        .img-size {
            width: 60px;
        }
        .data-pos{
            color: #796aee;
            text-align: center;
            font-size: 1.3rem;
            margin-left: 2rem;
        }
    </style>
</head>
<body>
<div class="page">
    <!-- Main Navbar-->
    <header th:replace="header::header"></header>
    <div class="page-content d-flex align-items-stretch">
        <nav th:replace="navbar2::navbar2"></nav>
        <div class="content-inner">
            <!-- Page Header-->
            <header class="page-header">
                <div class="container-fluid">
                    <h2 class="no-margin-bottom">公告管理栏</h2>
                </div>
            </header>
            <!-- Breadcrumb-->
            <div class="breadcrumb-holder container-fluid">
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/admin/index">主界面</a></li>
                    <li class="breadcrumb-item">公告栏</li>
                </ul>
            </div>
            <!-- Forms Section-->
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-close">
                            <div class="dropdown">
                                <button type="button" id="closeCard3" data-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="false" class="dropdown-toggle"><i class="fa fa-ellipsis-v"></i>
                                </button>
                                <div aria-labelledby="closeCard3" class="dropdown-menu dropdown-menu-right has-shadow">
                                    <a href="/getExcel1" class="dropdown-item"> <i class="fa fa-mail-forward"></i>导出</a>
                                    <a href="/admin/form" class="dropdown-item"> <i class="fa fa-plus"></i>增加</a>
                                    <button onclick="DelSelect1()" class="dropdown-item button-color"><i
                                            class="fa fa-times"></i>&nbsp;&nbsp;&nbsp;删除
                                    </button>
                                    <a href="/admin/toEmail" class="dropdown-item"> <i
                                            class="fa fa-envelope-o"></i>邮件</a>
                                </div>
                            </div>
                        </div>
                        <div class="card-header d-flex align-items-center">
                            <h3 class="h4">公告内容管理</h3>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-hover">
                                    <thead>
                                    <tr>
                                        <th><input type="checkbox" id="allChecks" onclick="ckAll()"/></th>
                                        <th>#</th>
                                        <th>封面</th>
                                        <th>时间</th>
                                        <th>内容</th>
                                        <th>编辑</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="page:${pages.list}">
                                        <td style="CURSOR: hand; HEIGHT: 22px" align="center" width="4"><input
                                                type="checkbox" th:value="${page.id}" id="check" value="" name="check">
                                        </td>
                                        <td th:text="${page.id}"></td>
                                        <td><img class="img-size"
                                                 th:src="@{http://cdn.jie12366.xyz/{fileName}(fileName=${page.picture})}">
                                        </td>
                                        <td th:text="${page.date}"></td>
                                        <td th:text="${page.content}"></td>
                                        <td><a th:href="@{/admin/editContent(id=${page.id})}">编辑</a></td>
                                    </tr>
                                    </tbody>
                                </table>
                                <!--实现分页,page.pageNum是当前页数，page.pages是总页数-->
                                <nav aria-label="Page navigation">
                                    <ul class="pagination">
                                        <li class="page-item previous">
                                            <a class="page-link" id="previous" onclick="previousPage()" aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                        <input type="hidden" id="pages" th:value="${pages.pages}">
                                        <input type="hidden" id="pageNum" th:value="${pages.pageNum}">
                                        <li class="page-item active"><a class="page-link" th:href="@{/admin/announce(start = ${pages.pageNum})}">
                                            <span th:text="${pages.pageNum}"></span></a>
                                        </li>
                                        <li class="page-item"><a class="page-link" th:if="${pages.pageNum} &lt; ${pages.pages}"
                                                                 th:href="@{/admin/announce(start = ${pages.pageNum + 1})}">
                                            <span th:text="${pages.pageNum + 1}"></span></a>
                                        </li>
                                        <li class="page-item"><a class="page-link" th:if="${pages.pageNum + 1} &lt; ${pages.pages}"
                                                                 th:href="@{/admin/announce(start = ${pages.pageNum + 2})}">
                                            <span th:text="${pages.pageNum + 2}"></span></a>
                                        </li>
                                        <li class="page-item"><a class="page-link" th:if="${pages.pageNum + 2} &lt; ${pages.pages}"
                                                                 th:href="@{/admin/announce(start = ${pages.pageNum + 3})}">
                                            <span th:text="${pages.pageNum + 3}"></span></a>
                                        </li>
                                        <li class="page-item"><a class="page-link" th:if="${pages.pageNum + 3} &lt; ${pages.pages}"
                                                                 th:href="@{/admin/announce(start = ${pages.pageNum + 4})}">
                                            <span th:text="${pages.pageNum + 4}"></span></a>
                                        </li>
                                        <li class="page-item nextPage">
                                            <a class="page-link" id="nextPage" onclick="nextPage()" aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                        <li>
                                            <span class="data-pos" th:text="共+${pages.pages}+页"></span>
                                        </li>
                                    </ul>
                                </nav>
                                <!--<div>
                                    <a th:href="@{/admin/announce(start = 1)}">首页</a>
                                    <a th:href="@{/admin/announce(start = ${pages.pageNum - 1})}">上一页</a>
                                    <a th:href="@{/admin/announce(start = ${pages.pageNum + 1})}">下一页</a>
                                    <a th:href="@{/admin/announce(start = ${pages.pages})}">尾页</a>
                                </div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Page Footer-->
            <footer th:replace="footer::footer"></footer>
        </div>
    </div>
</div>
<!-- JavaScript files-->
<script>

    //全选
    function ckAll() {
        var flag = document.getElementById("allChecks").checked;
        var cks = document.getElementsByName("check");
        for (var i = 0; i < cks.length; i++) {
            cks[i].checked = flag;
        }
    }

    //批量删除announce
    function DelSelect1() {
        var Checkbox = false;
        $("input[name='check']").each(function () {
            if (this.checked == true) {
                Checkbox = true;
            }
        });
        if (Checkbox) {
            var t = confirm("您确认要删除选中的内容吗？");
            if (t == false) {
                return false;
            } else {
                var checkedID = "";
                $("input[name='check']").each(function () {
                    if (this.checked == true) {
                        checkedID += this.value + ",";

                    }
                });
                checkedID = checkedID.substring(0, checkedID.length - 1);
                window.location.replace("/admin/deleteContent?id=" + checkedID);
            }
        } else {
            alert("请选择您要删除的内容!");
            return false;
        }
    }
</script>
<!-- JavaScript files-->
<script src="../../static/js/page-cut.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.0/js/bootstrap.min.js"></script>
<script src="../../static/js/front.js"></script>
</body>
</html>